<template>
    <div>
        <el-row>
            <span style="font-size: 27px">查新</span>

        </el-row>
<!--        <el-row>-->
<!--            <h4>页面解释类容</h4>-->
<!--        </el-row>-->
        <el-row>
            <el-col :span="20">
                <el-card shadow="hover" class="box-card">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="查新名称" prop="name">
                            <el-input style="width: 400px" v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="查新范围" prop="relam">
                            <el-radio-group v-model="ruleForm.relam" size="large">
                                <el-radio border label="1">国内外</el-radio>
                                <el-radio border label="2">国内</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="查新时间"  prop="time">

                            <el-radio-group v-model="ruleForm.time">
                                <el-radio label="3">3天</el-radio>
                                <el-radio label="4">4天</el-radio>
                                <el-radio label="5">5天</el-radio>
                                <el-radio label="7">7天</el-radio>

                            </el-radio-group>

                        </el-form-item>


                        <el-form-item label="查新点数"  prop="countN">

                            <el-select v-model="ruleForm.countV" placeholder="请选择"  value="">
                                <el-option
                                        v-for="item in countN"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>

<!--                        <el-form-item >-->
<!--                            <el-button  type="primary" @click="submitForm('ruleForm')">立即创建</el-button>-->
<!--                            <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--                        </el-form-item>-->
                    </el-form>
                </el-card>
            </el-col>

        </el-row>
        <el-row v-if="show()">
            <el-col :span="20">
                <el-card shadow="hover" class="box-card">
                    <el-descriptions title="XXXXXXX" direction="vertical" :column="2" border>
                        <el-descriptions-item label="查新名称" :span="2">{{ruleForm.name}}</el-descriptions-item>
                        <el-descriptions-item label="查新类型">   <el-tag >{{ruleForm.relam==='1'?'国内外':'国内'}}</el-tag></el-descriptions-item>
                        <el-descriptions-item label="查新天数" >   <el-tag >{{ruleForm.time+'天'}}</el-tag></el-descriptions-item>
                        <el-descriptions-item label="查新点数">
                            <el-tag >{{ruleForm.countV}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="计算公式">   {{countString()+"="+counN()}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </el-col>



        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data() {
            return {
                ruleForm: {
                    name: '',
                 time:null,
                    relam:null,
                    countV:null
                },
                countN:[
                    1,2,3,4,5,6,7,8,9,10
                ],
                rules: {
                    countN: [
                        { required: true, message: '查新名称', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '查新范围', trigger: 'change' }
                    ],
                    relam:[
                        { required: true, message: '查新时间', trigger: 'change' }
                    ],
                    time: [
                        { required: true, message: '查新点数', trigger: 'change' }
                    ],

                }
            };
        },
        watch: {},
        created: function () {
        },
        mounted() {
        },
        methods: { submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            counN() {
            var basis=0;
                if(this.ruleForm.time==='3'){
                    if (this.ruleForm.relam==='1'){
                        basis=2000;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=1000;
                    }
                }
                if(this.ruleForm.time==='4'){
                    if (this.ruleForm.relam==='1'){
                        basis=1800;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=900;
                    }
                }
                if(this.ruleForm.time==='5'){
                    if (this.ruleForm.relam==='1'){
                        basis=1600;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=800;
                    }
                }
                if(this.ruleForm.time==='7'){
                    if (this.ruleForm.relam==='1'){
                        basis=1400;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=700;
                    }
                }
                var  count=0;
                if (this.ruleForm.countV>1){
                    count=(basis+((this.ruleForm.countV-1)*(basis*0.3)))*1.03;
                }else {
                    count=(basis)*1.03;
                }
                return parseFloat(Number(count).toFixed(2));
            } , countString() {
                var basis=0;
                if(this.ruleForm.time==='3'){
                    if (this.ruleForm.relam==='1'){
                        basis=2000;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=1000;
                    }
                }
                if(this.ruleForm.time==='4'){
                    if (this.ruleForm.relam==='1'){
                        basis=1800;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=900;
                    }
                }
                if(this.ruleForm.time==='5'){
                    if (this.ruleForm.relam==='1'){
                        basis=1600;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=800;
                    }
                }
                if(this.ruleForm.time==='7'){
                    if (this.ruleForm.relam==='1'){
                        basis=1400;
                    }
                    if (this.ruleForm.relam==='2'){
                        basis=700;
                    }
                }
                var  count=0;
                if (this.ruleForm.countV>1){
                    count="("+basis+"+"+"(("+this.ruleForm.countV+"-1"+")*("+basis+"*0.3))*1.03";
                }else {
                    count=basis+"*1.03";
                }
                return count;
            }
            ,
                show(){
                   return  this.ruleForm.countV&&this.ruleForm.time&&this.ruleForm.relam
                }


        }
    }
</script>
<style>

    html,
    body,
    #app,
    .el-container {
        padding: 0;
        margin: 0;
        height: 100%;
    }
</style>
